<!--
 * @Author: your name
 * @Date: 2020-10-15 16:01:05
 * @LastEditTime: 2021-03-01 08:45:44
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\components\common\Footer.vue
-->
<template>
  <div class="wrapper">
    <div class="Footer w1200auto">
      <div class="Footer_top pt30 pb20">
        <div class="top_left">
          <div class="txt mr40 size16">{{$t('SIGN UP FOR EXCLUSIVE OFFERS')}}</div>
          <div class="submit">
            <input
              type="text"
              class="input mr10"
              :placeholder="inputEmail"
              v-model="userEmail"
            />
            <div class="btn" @click="sendOffers()">{{$t('SUBMIT')}}</div>
          </div>
        </div>
        <div class="top_right">
          <div class="top_right_title mr30 size16">{{$t('SOCIALIZE WITH US')}}</div>
          <ul class="top_right_share">
            <li>
                <a :href="'https://www.facebook.com/sharer/sharer.php?u=' + shareUrl + '&t=' + title"
                   onclick='javascript:window.open(this.href,"","width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes");return false'
                   :title="title"
                   class="share"
                >
                  <i class="iconfont icon-facebook"></i>
                </a>
            </li>
            <li>
                <a :href="'https://pinterest.com/pin/create/button/?url=' + shareUrl + '&description=' + title"
                  onclick='javascript:window.open(this.href,"","width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes");return false'
                  :title="title"
                  class="share"
                >
                  <i class="iconfont icon-pinterest"></i>
                </a>
            </li>
            <li>
                <a :href="'http://twitter.com/home/?status=' + shareUrl + '(' + title +')'"
                  onclick='javascript:window.open(this.href,"","width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes");return false'
                  :title="title"
                  class="share"
                >
                  <i class="iconfont icon-twitter"></i>
                </a>
            </li>
            <li>
                <a :href="'https://plus.google.com/share?url=' + shareUrl"
                :title="title"
                class="share"
                onclick='javascript:window.open(this.href,"","width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes");return false'>
                  <i class="iconfont icon-googleplus"></i>
                </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="Footer_center pt40 pb30">
        <div class="list">
          <h3 class="list_title mb20 lh15">{{$t("Product")}}</h3>
          <ul class="list_ul">
            <li class="mb10">
              <nuxt-link to="/eyeglasseslist?page=eyeglasses-Shop%20WoMen&sex=0" class="li lh15">{{$t("Women's Eyeglasses")}}</nuxt-link>
            </li>
            <li class="mb10">
              <nuxt-link to="/eyeglasseslist?page=eyeglasses-Shop%20Men&sex=1" class="li lh15">{{$t("Mens's Eyeglasses")}}</nuxt-link>
            </li>
            <li class="mb10">
              <nuxt-link to="/" class="li lh15">{{$t("Women's Sunglasses")}}</nuxt-link>
            </li>
            <li class="mb10">
              <nuxt-link to="/" class="li lh15">{{$t("Men's Sunglasses")}}</nuxt-link>
            </li>
            <li class="mb10">
              <nuxt-link to="/computer-glasses" class="li lh15">{{$t("Computer Glasses")}}</nuxt-link>
            </li>
            <li class="mb10">
              <nuxt-link to="/collections/prescription-sunglasses" class="li lh15">{{$t("Prescription Glasses")}}</nuxt-link>
            </li>
          </ul>
        </div>
        <div class="list">
          <h3 class="list_title mb20 lh15">{{$t("Faq")}}</h3>
          <ul class="list_ul">
            <li class="mb10">
              <a href="/help?id=Ordering&indexlz=0" class="li lh15">{{$t("How to Buy Glasses Online")}}</a>
            </li>
            <li class="mb10">
              <a href="/help?id=Frames&indexlz=0" class="li lh15">{{$t("How can I choose the right frame?")}}</a>
            </li>
            <li class="mb10">
              <a href="/help?id=Prescriptions&indexlz=2" class="li lh15">{{$t("How do I read my prescription?")}}</a>
            </li>
            <li class="mb10">
              <a href="/help?id=Lenses&indexlz=0" class="li lh15">{{$t("What lens tint is right for me?")}}</a>
            </li>
            <li class="mb10">
              <a href="/help?id=Shipping&indexlz=1" class="li lh15">{{$t("When can I expect my glasses to arrive?")}}</a>
            </li>
            <li class="mb10">
              <a href="/help?id=Return&indexlz=1" class="li lh15">{{$t("Do you have a warranty?")}}</a>
            </li>
          </ul>
        </div>
        <div class="list">
          <h3 class="list_title mb20 lh15">{{$t("About us")}}</h3>
          <ul class="list_ul">
            <li class="mb10">
              <a href="/about-us?indexlz=0" class="li lh15">{{$t("About Eyecedar")}}</a>
            </li>
            <li class="mb10">
              <a href="/blog" class="li lh15">{{$t("Our Blog")}}</a>
            </li>
            <li class="mb10">
              <a href="/about-us?indexlz=1" class="li lh15">{{$t("Why Choose Us")}}</a>
            </li>
            <li class="mb10">
              <a href="/about-us?indexlz=2" class="li lh15">{{$t("Journal")}}</a>
            </li>
            <li class="mb10">
              <a href="/about-us?indexlz=3" class="li lh15">{{$t("Shipping & Returns")}}</a>
            </li>
            <li class="mb10">
              <a href="/manufacturing" class="li lh15">{{$t("Our eyeglass production story")}}</a>
            </li>
          </ul>
        </div>
        <div class="list">
          <h3 class="list_title mb20 lh15">{{$t("Customer service")}}</h3>
          <ul class="list_ul">
            <li class="mb10">
              <nuxt-link to="/" class="li lh15">{{$t("Order tracking")}}</nuxt-link>
            </li>
            <li class="mb10">
              <nuxt-link to="/" class="li lh15">{{$t("Gift card")}}</nuxt-link>
            </li>
            <li class="mb10">
              <nuxt-link to="/" class="li lh15">{{$t("Coupons")}}</nuxt-link>
            </li>
            <li class="mb10">
              <nuxt-link to="/" class="li lh15">{{$t("Points Program")}}</nuxt-link>
            </li>
            <li class="mb10">
              <nuxt-link to="/" class="li lh15">{{$t("Refer a Friend")}}</nuxt-link>
            </li>
            <li class="mb10">
              <nuxt-link to="/" class="li lh15">{{$t("Affiliate Program")}}</nuxt-link>
            </li>
          </ul>
        </div>
        <!-- <div class="list">
          <h3 class="list_title mb20 lh15">{{$t("Concat us")}}</h3>
          <ul class="list_ul">
            <li class="mb10" @click="contactEmail()"><a href="javascript:;" class="li contactEmail"><i class="iconfont icon-youxiang"></i>{{contactVal}}</a></li>
            <li class="mb20 CustomerService">
              <a href="javascript:;" class="li mr20"><i class="iconfont icon-weixinliaotian"></i>{{$t('Live chat')}}</a>
              <nuxt-link to="/" class="li lh15">{{$t('More')}}</nuxt-link>
            </li>
          </ul>
        </div> -->
      </div>
      <div class="Footer_bottom mb40">
        <div class="list">
          <h3 class="list_title mb20 lh15">{{$t('Safe shopping')}}</h3>
          <ul class="list_ul">
            <li class="mb10">
              <nuxt-link to="/" class="li lh15">{{$t("We utilize industry-standard Secure")}}</nuxt-link>
            </li>
            <li class="mb10">
              <nuxt-link to="/" class="li lh15">{{$t("Sockets Layer (SSL) technology to")}}</nuxt-link>
            </li>
            <li class="mb10">
              <nuxt-link to="/" class="li lh15">{{$t("protect information security")}}.</nuxt-link>
            </li>
            <li class="imgLine">
                <img v-lazy="require('~/assets/image/home/img_6.png')" alt="" />
            </li>
          </ul>
        </div>
        <div class="list">
          <h3 class="list_title mb20 lh15">{{$t('Payment')}}</h3>
          <ul class="list_ul">
            <li class="mb10">
              <nuxt-link to="/" class="li lh15">{{$t("Provide a variety of payment methods")}}</nuxt-link>
            </li>
            <li class="mb10">
              <nuxt-link to="/" class="li lh15">{{$t("including VISA, MasterCard")}}</nuxt-link>
            </li>
            <li class="mb10">
              <nuxt-link to="/" class="li lh15">{{$t("Discover, PayPal Express")}}</nuxt-link>
            </li>
            <li class="imgLine">
                <a href="javascript:;"><img v-lazy="require('~/assets/image/home/visa.png')" alt="" /></a>
                <a href="javascript:;"><img v-lazy="require('~/assets/image/home/master_card.png')" alt="" /></a>
                <a href="javascript:;"><img v-lazy="require('~/assets/image/home/discover.png')" alt="" /></a>
                <a href="javascript:;"><img v-lazy="require('~/assets/image/home/paypal.png')" alt="" /></a>
            </li>            
          </ul>
        </div>
        <div class="list">
          <h3 class="list_title mb20 lh15">{{$t('Shipping')}}</h3>
          <ul class="list_ul">
            <li class="mb10">
              <nuxt-link to="/" class="li lh15">{{$t("Shipment within One days after order payment")}}</nuxt-link>
            </li>
            <li class="mb10">
              <nuxt-link to="/" class="li lh15">{{$t("Standard Shipping  Estimated Delivery: 8-10 days")}}</nuxt-link>
            </li>
            <li class="mb10">
              <nuxt-link to="/" class="li lh15">{{$t("Express Shipping  Estimated Delivery: 4-6 days")}}</nuxt-link>
            </li>
            <li class="imgLine">
                <a href="javascript:;"><img v-lazy="require('~/assets/image/home/dhl.png')" alt="" /></a>
                <a href="javascript:;"><img v-lazy="require('~/assets/image/home/ups.png')" alt="" /></a>
                <a href="javascript:;"><img v-lazy="require('~/assets/image/home/fedex.png')" alt="" /></a>
            </li>
          </ul>
        </div>
        <div class="list">
          <h3 class="list_title mb20 lh15">{{$t('Language and currency')}}</h3>
          <ul class="list_ul">
            <li class="mb10"><a href="javascript:;" class="li gradients lh15"><i class="el-icon-phone mr10"></i>{{telphone}}</a></li>
            <li class="mb10" @click="contactEmail()"><a href="javascript:;" class="li contactEmail gradients lh15"><i class="iconfont icon-youxiang mr10"></i>{{contactVal}}</a></li>
            <li class="mb10 CustomerService">
              <a href="javascript:;" class="li mr20 gradients"><i class="iconfont icon-weixinliaotian mr10"></i>{{$t('Live chat')}}</a>
              <nuxt-link to="/" class="li gradients lh15">{{$t('More')}}</nuxt-link>
            </li>
            <li class="language">
                <el-select v-model="languageVal" :placeholder="inputTip"  @change="chooseLanguage(languageVal)">
                  <el-option
                    v-for="item in langUageOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    <img :src="item.imgUrl" alt="" class="language_img">
                    <span class="ml10">{{item.label}}</span>
                  </el-option>
                  <template slot="prefix">
                    <img :src="languageImg" class="img" alt="">
                  </template>
                </el-select>
            </li>            
          </ul>
        </div>
      </div>
    </div>
    <div class="wrapper_bottom">
      <div class="bottom">
        <div class="left">{{$t('Copyright © 2020 by www.eyecedar.com. All Rights Reserved')}}.</div>
        <ul class="right">
          <li class="li">
            <nuxt-link to="/privacy-policy" class="link">{{$t('privacy-policy')}}</nuxt-link>
          </li>
          <li class="li">
            <nuxt-link to="/" class="link">{{$t('Teams of Use')}}</nuxt-link>
          </li>
          <li class="li"><nuxt-link to="/" class="link">{{$t('Sitemap')}}</nuxt-link></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { validEmail } from '@/utils/validate';
import { Message } from 'element-ui';
import Cookie from 'cookie'
import { mapState, mapMutations } from 'vuex';
export default {
  data() {
    return {
      shareUrl: '',
      title: '',
      contactVal: 'service@eyecedar.com',
      userEmail: '',
      languageVal: 'en',
      telphone: '(888)7801885',
      inputTip: this.$t('please choose'),
      inputEmail: this.$t('Enter Your Email Here'),
      langUageOptions: [{
        value: 'en',
        label: 'English(GBD)',
        imgUrl: require('~/assets/image/2019-05-15_english.png')
      }, {
        value: 'ger',
        label: 'German(GER)',
        imgUrl: require('~/assets/image/2019-05-15_germene.png')
      }, {
        value: 'fr',
        label: 'French(FR)',
        imgUrl: require('~/assets/image/2019-05-15_france.png')
      }],
      languageImg: require('~/assets/image/2019-05-15_english.png')    
    }
  },
  mounted() {
    this.initLangUage(this.locale);
    this.$nextTick(() => {
      this.shareUrl = encodeURIComponent('http://www.eyecedar.com/');
      this.title = escape('森德进出口贸易有限公司');
    })
  },
  computed: {
    ...mapState({
      locale: state => state.content.locale
    })
  },
  methods: {
    ...mapMutations('content', ['SET_LANGUAGE']),
    initLangUage (language) {
      let languageData = this.langUageOptions;
      for(let i = 0; i < languageData.length; i++) {
        if (language === languageData[i].value) {
          this.languageImg = languageData[i].imgUrl;
          this.languageVal = languageData[i].label;
          break;
        }
      }
      this.inputEmail = this.$t('Enter Your Email Here');
      this.inputTip = this.$t('please choose');
    },
    chooseLanguage(language) {
      this.initLangUage(language);
      this.SET_LANGUAGE(language);
      // this.$store.commit('SET_LANGUAGE', language)
      this.$i18n.locale = language;
    },
    sendOffers() {
      const userEmail = this.userEmail.trim()
      let isEmail = validEmail(userEmail);
      if (isEmail) {
        console.log('提交订阅邮箱 :>> ', userEmail);
      } else {
        Message.error({
          message: '请输入正确邮箱'
        })
      }
    },
    contactEmail() {
      parent.location.href = 'mailto:' + this.contactVal + '?subject=';
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~/assets/scss/index.scss";
.wrapper {
  background: #eee;
  &_bottom {
    width: $s100;
    height: 46px;
    background: $c333;
  }
}
.Footer {
  .li {
      display: block;
      @include ellipsis();
  }
  &_top {
    @include flex-center(space-between);
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid $ddd;
  }
  &_center {
     @include flex();
     flex-wrap: wrap;
     .list {
       width: 28%;
     }
    .list:nth-child(1) {
        // width: 18.3333%;
    }
    .list:nth-child(2) {
        // width: 25%;
    }
    .list:nth-child(3) {
        // width: 20%;
    }
    .list:nth-child(4) {
        // width: 18.3333%;
        width: 16%;
    }
    // .list:nth-child(5){
    //   flex-grow: 1;
    //   .contactEmail {
    //     @include flex();
    //     align-items:center;
    //     .iconfont {
    //       margin-right: 5px;
    //     }
    //   }
    // }
    .li:hover {
      color: $theme1 !important;
    }
  }
  &_bottom {
    @include flex();
    flex-wrap: wrap;
    .list {
      width: 28%;
    }
    .list:nth-child(1) {
        // width: 18.3333%;
    }
    .list:nth-child(2) {
        // width: 30%;
    }
    .list:nth-child(3) {
        // flex-grow: 1;
    }
    .list:nth-child(4) {
      width: 16%;
      .CustomerService {
        @include flex-center(flex-start);
        .iconfont {
          font-size: 14px;
          margin-right: 5px;
        }
      }
    }
    .imgLine {
      height: 43px;
      line-height: 43px;
    }
  }
  .list_title {
    font-weight: 600;
    color: $c000;
    font-size: 14px;
  }
  .top_left {
    @include flex-center(flex-start);
    .submit {
        @include flex-center(flex-start);
    }
    .input {
      border: 2px solid #939594;
      width: 280px;
      box-sizing: border-box;
      padding: 4px 5px;
      border-radius: 5px;
      font-size: 14px;
    }
    .input::-webkit-input-placeholder{
        color: $c999;
        font-size: 12px;
    }
    .input::-moz-placeholder {  //不知道为何火狐的placeholder的颜色是粉红色，怎么改都不行，希望有大牛路过帮忙指点
        color: $c999;
        font-size: 12px;
    }
    .input:-ms-input-placeholder {  //由于我的IE刚好是IE9，支持不了placeholder，所以也测试不了(⊙﹏⊙)，有IE10以上的娃可以帮我试试
        color: $c999;   
        font-size: 12px;   
    }
    .btn {
      background: #4c4c4c;
      color: $cfff;
      border-radius: 4px;
      padding: 8px 10px;
      font-size: 14px;
      border: 1px solid #4c4c4c;
      font-weight: 400;
      cursor: pointer;
    }
  }
  .top_right {
    @include flex-center(flex-start);
    &_share {
      width: 200px;
      @include flex-center(space-between);
      .share:hover {
        color: $c666;
      }
      .iconfont {
        font-size: 20px;
      }
    }
  }
}
.bottom {
  max-width: 1200px;
  margin: 0 auto;
  @include flex-center(space-between);
  color: $cfff;
  font-size: 12px;
  height: $s100;
  .right {
    @include flex();
    .li {
      margin-right: 25px;
    }
    .link {
      display: block;
      color: $cfff;
    }
  }
}

</style>
<style lang="scss">
.language {
  position: relative;
}
.language .el-input--suffix .el-input__inner {
  padding-left: 60px;
  background: #eee;
}
.language .img {
  position: absolute;
  left: 10px;
  top: 8px;
}
.language .img,
.language_img {
  width: 34px;
  height: 25px;
}
</style>